<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <#include "/WEB-INF/views/include/header.html">
    <link href="${base}/static/jquery/css/zTreeStyle.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="${base}/static/jquery/js/jquery.ztree.all-3.5.js"></script>
    <title>Title</title>
    <script type="text/javascript">
        var tree, setting = {
            async: {
                enable: true,
                url: "${base}/sys/area/treeData"
            },
            data: {
                simpleData: {
                    enable: true,
                    idKey : "id",
                    pIdKey : "pId",
                    rootPId : -1
                }
            },
            callback: {
                // zTree单击事件
                onClick: function (event, treeId, treeNode) {

                },
                // zTree加载完成事件
                onAsyncSuccess: function () {
                }
            }
        };
        $(function () {
            // 初始化树结构
            tree = $.fn.zTree.init($("#tree"), setting);
        })
    </script>
</head>
<body>
<div style="position:absolute;right:8px;top:5px;cursor:pointer;" onclick="search();">
    <i class="icon-search"></i><label id="txt">搜索</label>
</div>
<div id="search" class="form-search hide" style="padding:10px 0 0 13px;">
    <label for="key" class="control-label" style="padding:5px 5px 3px 0;">关键字：</label>
    <input type="text" class="empty" id="key" name="key" maxlength="50" style="width:110px;">
    <button class="btn" id="btn" onclick="">搜索</button>
</div>
<div id="tree" class="ztree" style="position: absolute;left: 5px;top: 40px;bottom: 5px;right: 5px"></div>
</body>
</html>